<template>
    <div class="note-container" v-loading="loading">
        <div class="left">
            <div class="title">目录</div>
            <div class="nav" v-html="myNav"></div>
        </div>
        <div class="right">
            <div class="note">
                <h1 class="title">{{item.title}}</h1>
                <div class="subtitle">
                    <div class="time">修改时间：{{item.recentUpdate}}</div>
                    <div class="desc">摘要：{{item.description}}</div>
                </div>
                <div class="content" v-html="item.content"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getNoteById} from 'network/app'
    import markdownItAnchor from 'markdown-it-anchor'
    import markdownItTocDoneRight from 'markdown-it-toc-done-right'
    export default {
        data(){
            return{
                item:{
                    recentUpdate: null,
                    description: "",
                    title: "",
                    content: ''
                },
                myNav: "",
                loading: false
            }
        },
        methods: {
            getNoteById(id){
                this.loading = true
                const _this = this
                getNoteById(id)
                    .then(res=>{
                        let data = res.data.data
                        _this.item.title = data.title
                        _this.item.recentUpdate = data.recentUpdate
                        _this.item.description = data.description
                        var md = require("markdown-it")({
                            html: true,
                            typographer: true
                        }).use( markdownItAnchor, {permalink: false, permalinkBefore: false, permalinkSymbol: '#'}).use( markdownItTocDoneRight,{
                            containerClass: 'toc',//生成的容器的类名，这样最后返回来的字符串是 <nav class="toc"><nav/>
                            containerId: 'toc',//生成的容器的ID，这样最后返回来的字符串是 <nav id="toc"><nav/>
                            listType: 'ul',//导航列表使用ul还是ol
                            listClass: 'listClass',//li标签的样式名
                            linkClass: 'linkClass',//a标签的样式名
                        callback: function (html, ast) {
                            //把目录单独列出来
                            // console.log(ast)
                            // left.innerHTML = html;
                            _this.myNav = html
                        }
                        })
                        // var md = new MardownIt()

                        var result = md.render(data.content)
                        _this.item.content = result

                    })
                    .finally(()=>{
                        this.loading = false
                    })
            }
        },
        created(){
            let id = this.$route.params.title
            this.getNoteById(1)
        }
    }
</script>

<style lang="scss" scoped>
    .note-container{
        height: 100%;
        display: flex;
        .left{
            box-sizing: border-box;
            height: 100%;
            flex: 1;
            border-right: 2px solid #d3d3d3;
            overflow: auto;
            padding: 0.5rem 0.5rem 0.5rem 1rem;
            .nav{
                padding-top: .37037rem;
                font-size: .296296rem;
                line-height: .462963rem;
                
            }
            .title{
                font-size: .444444rem;
                line-height: .444444rem;
                font-weight: bold;
                text-align: center;
                border-bottom: 1px solid #d3d3d3;
                padding-bottom: .185185rem;
            }
        }
        .right{
            box-sizing: border-box;
            flex: 5;
            height: 100%;
            overflow: auto;
            padding: 0 .5rem;
            .note{
                
                margin: 0 auto;
                max-width: 960px;
                .title{
                    font-size: .62963rem;
                    line-height: .62963rem;
                    padding: .5rem 0 .1rem;
                    border-bottom: 1px solid #d3d3d3;
                    text-align: center;
                }
                .subtitle{
                    font-size: .296296rem;
                    line-height: .444444rem;
                    color: #567;
                    padding: .37037rem .37037rem 1.111111rem;
                }
            }
        }
    }

    @media (max-width: 1024px) {
        .note-container{
            flex-direction: column;
            height: auto;
        }
    }
</style>

<style lang="scss">
  .nav{
    .toc{
      li>ul{
        margin-left: 2em;
      }
      .linkClass{
        text-decoration: none;
        color: #567;
      }
      .linkClass:hover{
        text-decoration: underline;
      }
      
    }
  }
  .content{
    font-size: .296296rem;
    line-height: .555556rem;
    h1,h2,h3,h4,h5,h6{
      font-weight: bold;
      border-bottom: 1px solid #d3d3d3;
      margin: .185185rem 0;
      padding-bottom: .185185rem;
    }
    h1{
      font-size: .555556rem;
      line-height: .555556rem;
      color: #303133;
    }
    h2{
      font-size: .518519rem;
      line-height: .518519rem;
      color: rgba(48,49,51,.9);
    }
    h3{
      font-size: .481481rem;
      line-height: .481481rem;
      color: rgba(48,49,51,.8);
    }
    h4{
      font-size: .444444rem;
      line-height: .444444rem;
      color: rgba(48,49,51,.7);
    }
    h5{
      font-size: .407407rem;
      line-height: .407407rem;
      color: rgba(48,49,51,.6);
    }
    h6{
      font-size: .37037rem;
      line-height: 20px;
      color: rgba(48,49,51,.5);
    }
    pre{
      background-color: rgba(218,220,208,.2);
      border: .037037rem solid #e0dfcc;
      padding: .092593rem .37037rem;
      border-radius: .185185rem;
      overflow: auto;
      margin-top: .185185rem;
      margin-bottom: .185185rem;
    }
    p{
      overflow: auto;
    }
    p>code,li>code{
      
      background-color: #eee;
      padding: .037037rem .092593rem;
      border-radius: .092593rem;
      
    }
    ul,ol{
      margin-left: 2em;
    }
    li>ul,li>ol{
      margin-left: 1em;
    }
    blockquote{
      // margin-left: 2em;
      padding: .37037rem 0 .185185rem .185185rem;
      margin: .37037rem 0;
      border-left: .092593rem solid #ccc;
      color: #556677;
    }
    code{
      font-family: monospace,Consolas,Monaco,"Andale Mono";;
    }
    a{
      color: #1a0dab;
      text-decoration: none;
    }
    a:hover{
      text-decoration: underline;
    }
  }
  
</style>


